<template>
  <div class="container">
    <div class="header" @click="handleInp">
      {{ new Date().getFullYear() }}年优秀摊位公示
    </div>
    <el-scrollbar element-loading-background="transparent" v-loading="loading">
      <div class="item-wrap">
        <div v-for="(item, index) in tabList" :key="index" class="item">
          <div class="cover">
            <van-image
              v-if="item.pic"
              fit="cover"
              round
              width="65px"
              height="65px"
              :src="item.pic"
            />
            <van-image
              v-else
              round
              width="65px"
              height="65px"
              :src="item.gender == 1 ? boyUrl : girlUrl"
            />
          </div>
          <div class="name">{{ item.name }}</div>
          <div class="mark">
            <img
              v-for="i in item.xydj"
              :key="i"
              src="@img/cxgs/cxgs_13.png"
              alt=""
            />
            <img
              v-for="i in 5 - item.xydj"
              :key="i"
              src="@img/cxgs/cxgs_10.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script setup>
import emitter from "@/utils/eventBus";
import { ref } from "vue";
import { getYXTWByMarket, getIntro } from "@/apis/subjectInfo";
// const boyUrl = ref("src/assets/images/ztxx/boy.png");
// const girlUrl = ref("src/assets/images/ztxx/girl.png");
import boyUrl from "@img/ztxx/boy.png";
import girlUrl from "@img/ztxx/girl.png";
import { useRouter } from "vue-router";
const router = useRouter();
let loading = ref(false);
const show = ref(false);
const tabList = ref();
const code = ref();
const getInfo = () => {
  loading.value = true;
  getYXTWByMarket().then((res) => {
    tabList.value = res.data;
    loading.value = false;
  });
};
getInfo();
const handleInp = () => {
  router.push({path:'/codeInput'})
  // show.value = true;
};
const handleConfirm = () => {
  localStorage.removeItem("type");
  localStorage.removeItem("marketId");
  localStorage.removeItem("pfmarketId");
  // localStorage.setItem("weiyima", code.value);
  emitter.emit("updateWeiyima", code.value);
  router.push({ path: "/home" });
};
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  overflow: hidden;
  .header {
    margin: 15px 0;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 1px;
  }
  .el-scrollbar {
    height: calc(100% - 57px);
  }
  .item-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    display: grid;
    grid-row-gap: 8px;
    justify-content: space-around;
    align-content: center;
    grid-template-columns: repeat(auto-fill, 110px);
    .item {
      width: 80px;
      height: 124px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 14px;
      background: #fff;
      color: #000;
      margin-bottom: 10px;
      margin-right: 9px;
      letter-spacing: 1px;
      .cover {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 65px;
        height: 65px;
        border: 1px solid #3e63ac;
        border-radius: 50%;
      }
      .name {
        margin-top: 10px;
        font-size: 14px;
        font-weight: 600;
      }
      .mark {
        margin-top: 10px;
        img {
          width: 16px;
        }
      }
    }
  }
}
</style>
